Optimize images Çözümü

Görüntüleri Optimize Etmek

Genel Açıklama

Sayfaların yüklenme süreleri uygun boyutta görüntüler yükleyerek azaltılabilir.

• Görüntülerin görüntüleneceği yere göre dosya boyutlarını küçültün
• Görüntü dosyalarını CSS yerine tematik olarak yeniden boyutlandırın
• Dosyaları kullanıma uygun formatta kaydedin
• Maliyet fayda oranı: yüksek değer
• Erişim gerekli

İnternet Ağı İçin Görüntüleri Optimize Etmek Nedir?

Photoshop ve Illustrator gibi programlarda oluşturduğunuz görseller harika görünüyor olabilir fakat; genellikle dosya boyutları çok büyüktür. Bu durum görüntülerin farklı şekillerde kullanılmalarını kolaylaştıran bir formatta yapılmasından kaynaklanır.

Dosya boyutları her bir görüntü için birkaç megabayttan daha fazla olan dosyaları web sitenize koyarsanız, yüklenmesi çok yavaş olacaktır.

Resimlerinizi internet ağı için optimize etmek, görselin içeriğine bağlı olarak resimlerinizi web uyumlu bir biçimde kaydetmek veya derlemek anlamına gelir.

Görüntüler yalnızca ekranda gördüğünüz pikselleri değil, bunun dışında başka verileri de tutarlar. Bu veriler resme gereksiz boyut katabilir, bu da kullanıcı görselin indirilmesini beklerken daha uzun yükleme süresine sebep olabilir.

Maliyete göre fayda açısından, henüz optimize etmediyseniz, resimlerinizi optimize etmek sayfa hızı optimizasyonlarınızın en üstünde olmalıdır.

Nasıl İşe Yarıyor?

Daha basit bir ifade ile, görüntünüzü optimize etmek, görüntünün dosya boyutunu azaltmak için resmin içerisine kaydedilmiş tüm gereksiz verileri resmin web sitenizde kullanılacağı yer esas alınarak kaldırılması şeklinde çalışır.

İnternet ağı için görüntüleri optimize etmek, toplam sayfa yükleme boyutunuzu %80'e kadar azaltabilir.

Anlaşılması gereken iki sıkıştırma yöntemi vardır. Bunlar, Kayıplı ve Kayıpsız sıkıştırma yöntemleridir.

Kayıplı yöntem ile kaydedilen görüntüler, sıkıştırılmamışsa orijinal görüntüden biraz farklı görünür. Bu farklılığın sadece çok yakından bakıldığında anlaşılabileceğini unutmamak gerekir. Kayıplı sıkıştırma internet ağı için iyidir çünkü görüntüler az miktarda bellek kullanır fakat; yeterli düzeyde orijinal resim gibi olabilirler.

Kayıpsız biçimde kaydedilen görüntüler, orijinal görüntüyü üretmek için gereken tüm bilgileri saklar. Bundan dolayı, bu görüntüler çok daha fazla veri taşırlar ve bunun karşılığında çok büyük bir dosya boyutuna sahiplerdir.

Ayrıca görüntüler internet ağı için uygun boyutlarda kaydedilerek optimize edilebilir. Web sayfasındaki görüntünün CSS kullanarak yeniden boyutlandırılması bu işlem için yardımcı olur. Fakat sorun şu ki; web tarayıcısı hala tamamen orijinal dosyayı indirecek, sonra yeniden boyutlandıracak ve görüntüleyecektir.

Poster boyutunda bir fotoğraf çekip, bunu küçük bir resim olarak kullanmayı hayal edebiliyor musunuz? Küçük bir 20px ye 20px resmin yüklenmesi bir orijinal posterin yüklenmesi kadar uzun zaman alabilir. Hâlbuki altı üstü 20px bir resim yüklüyor olabiliriz.

Neden Önemli?

Görüntülerinizi optimize etmenin bu kadar önemli olmasının esas sebebi, çoğu web sitesinin %90'ının içerik olarak grafiklerden oluşması ve bu nedenle birçok görüntü dosyası bulunmasıdır. Bu görüntülerin yanlış formatta ve sıkıştırılmamış olması web sayfanızın yüklenme süresini ciddi ölçüde yavaşlatabilir.

Görselleri Nasıl Optimize Edebilirsiniz?

Görüntülerin tam optimizasyonu harika bir sanat olabilir. Çünkü başa çıkabileceğiniz çok çeşitli görüntüler vardır. İşte görüntülerinizi internet ağı için optimize etmenin en yaygın yolları:

• Bazı geliştiriciler dolgu için beyaz boşluk kullanır ki bu ciddi bir yanlıştır. Resimlerinizi optimize etmek için resimlerin etrafındaki beyaz boşluğu azaltın. Resmin etrafındaki boşlukları kaldırmak için resimler kırpılmalı ve dolgu sağlamak için CSS kullanılmalı.
• Uygun dosya formatları kullanın. Eğer, simgelere, madde imlerine ya da fazla renkli olmayan grafikler var ise GIF gibi bir format kullanın ve dosyayı daha az miktarda renkle kaydedin. Eğer, daha ayrıntılı grafikleriniz varsa görüntüyü kaydetmek için bu durumda JPG dosya formatını kullanın ve görüntünün kalitesini düşürün.
• Resimlerinizi uygun boyutlarda kaydedin. Resimlerinizi yeniden boyutlandırmak için HTML ya da CSS kullanmanız şartsa, orada durun. Dosya boyutunu küçültmek için görüntüyü istediğiniz boyutta kaydedin.

Resimlerinizi yeniden boyutlandırmak için bir tür program kullanmanız gerekecektir. Çok basit bir sıkıştırma için GIMP gibi sade bir düzenleme programı kullanabilirsiniz. Daha ileri düzey bir optimizasyon için, belirli dosyaları Photoshop, Illustrator veya Fireworks uygulamasına kaydetmeniz gerekir.

PageSpeed bu öneriyi test etmek için hangi araçları kullanıyor?

JPEG'ler için libjpeg-turbo ve PNG / GIF'ler için ise OptiPNG kullanılması önerilir.